<template>
  <div class="wpwork-preview-main user-form">
    <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="接收者：">
            <el-input v-model="listQuery.receivePerson" placeholder="备注" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发送者：">
            <el-input v-model="listQuery.sendPerson" placeholder="备注" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="消息类型：">
            <el-select v-model="listQuery.sendType" clearable placeholder="--请选择--">
              <el-option label="个人" value="person"></el-option>
              <el-option label="群组" value="group"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内容关键字：">
            <el-input v-model="listQuery.keyword" placeholder="备注" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="起始时间：">
            <el-date-picker v-model="listQuery.startTime" type="datetime"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="截止时间：">
            <el-date-picker v-model="listQuery.endTime" type="datetime"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{$t('common.search')}}</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
      <wpwork-table v-loading="listLoading" :data="tableData" :hasNO="false">
        <el-table-column prop="type" label="消息类别" />
        <el-table-column prop="fromUserName" label="发送者" />
        <!-- <el-table-column prop="creatorTime" label="消息内容"  /> -->
        <el-table-column prop="toUserName" label="接收者" />
        <el-table-column prop="creatorTime" label="发送时间" :formatter="wpwork.tableDateFormat" />
        <!-- <el-table-column prop="isRead" label="是否已读" /> -->
        <el-table-column prop="readTime" label="已读时间" :formatter="wpwork.tableDateFormat" />
        <el-table-column prop="message" label="内容" min-width="170" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" min-width="170" show-overflow-tooltip />
        <el-table-column label="操作">
          <template slot-scope="scope" v-if="!scope.row.isAdministrator">
            <el-button size="mini" type="text" @click="handleUpdateState(scope.row)">
              详情
            </el-button>
            <el-button size="mini" style="color:red;" type="text" @click="handleDel(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </wpwork-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
        @pagination="initData" />
    </div>
    <info-dialog ref="infoDialog" />
  </div>
</template>

<script>
import InfoDialog from './InfoDialog.vue'
import request from "@/utils/request";
export default {
  name: 'message',
  components: {
    InfoDialog
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        keyword: '',
        startTime: '',
        endTime: '',
        sendType: '',
        sendPerson: '',
        receivePerson: '',
      },
      total: 2,
    }
  },
  watch: {

  },
  computed: {

  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    handleDel(id) {
      this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/example/message/deleteDataOne`,
          method: "post",
          params: { id: id }
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.initData()
        })
      }).catch(() => { })
    },
    search() {
      this.initData()
    },
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    handleUpdateState(row) {
      this.$refs.infoDialog.openDialog({
        type: row.type,
        fromUserName: row.fromUserName,
        toUserName: row.toUserName,
        creatorTime: row.creatorTime,
        isRead: row.isRead,
        readTime: row.readTime,
        message: row.message,
        remark: row.remark,
      });
    },
    initData() {
      this.listLoading = true
      this.listQuery.startTime = this.listQuery.startTime ? this.listQuery.startTime : ''
      this.listQuery.endTime = this.listQuery.endTime ? this.listQuery.endTime : ''
      this.listQuery.keyword = this.listQuery.keyword ? this.listQuery.keyword : ''
      this.listQuery.sendType = this.listQuery.sendType ? this.listQuery.sendType : ''
      this.listQuery.sendPerson = this.listQuery.sendPerson ? this.listQuery.sendPerson : ''
      this.listQuery.receivePerson = this.listQuery.receivePerson ? this.listQuery.receivePerson : ''
      request({
        url: `/api/example/message/instantMessage`,
        method: "post",
        params: this.listQuery
      }).then((res) => {
        console.log("🚀 ~ :122 ~ initData ~ res:", res)
        this.tableData = res.data;
        this.tableData.forEach(item => {
          if (!item.enddate && item.begindate) {
            item.uploadTimes = item.begindate
          } else if (!item.begindate && item.enddate) {
            item.uploadTimes = item.enddate
          }
          item.type = item.type == 'group' ? '群组消息' : '个人消息'
          item.isRead = item.isRead == 0 ? '未读' : '已读'
        })
        console.log("🚀 ~ :112 ~ initData ~ this.tableData:", this.tableData)
        this.listLoading = false
      });
    },
    reset() {
      this.listQuery.startTime = ''
      this.listQuery.endTime = ''
      this.listQuery.keyword = ''
      this.listQuery.sendType = ''
      this.listQuery.sendPerson = ''
      this.listQuery.receivePerson = ''
      this.initData()
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form {
  margin-top: 65px;
  height: 92%;
}
@media (max-width: 1268px) {
  .user-form {
    margin-top: 98px;
  }
}
@media (max-width: 768px) {
  .user-form {
    margin-top: 168px;
  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>